<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格(单位:元)" prop="price" label-width="150px">
      <el-input v-model="ruleForm.price"></el-input>
    </el-form-item>
    <el-form-item label="商品库存(单位:kg)" prop="store" label-width="150px">
      <el-input v-model="ruleForm.store"></el-input>
    </el-form-item>
    <el-form-item label="商品类型">
     <el-radio-group v-model=" ruleForm.classifyId">
    <el-radio v-for="(item,index) in classifyIdList" :label="item._id" :key="index">{{item.name}}</el-radio>
  </el-radio-group>
    </el-form-item>
    <el-form-item label="商品介绍" prop="intro">
      <el-input type="textarea" v-model="ruleForm.intro"></el-input>
    </el-form-item>
    <div class="pic">
      <el-upload class="upload-demo" drag action="/files/upLoad" :on-success="success" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将图片拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <el-form-item>
      <el-button type="primary" @click="addOne">新增商品</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers} from "vuex";
const {
  mapState: mapStateGoodsType,
  mapActions: mapActionsGoodsType,
} = createNamespacedHelpers("goodsType");

export default {
  data() {
    return {
      ruleForm: {
        number: "",
        name: "",
        price: 0,
        store: 0,
        delivery: false,
        classifyId:"",
        intro: "",
        listImages: "",
        detailImages: []
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        store: [
          { required: true, message: "请输入商品库存量", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        intro: [{ required: true, message: "请填写商品介绍", trigger: "blur" }]
      }
    };
  },
  computed:{
    ...mapStateGoodsType(["classifyIdList"])
  },
  mounted(){
    this.getGoodsType()
  },
  methods: {
    ...mapActionsGoodsType(["getGoodsType"]),
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //新增数据
    addOne() {
      this.ruleForm.number = parseInt(Math.random() * 1000);
      axios.post("/goods/addOne", this.ruleForm).then(res => {
        if (res.data) {
          this.$router.push("/All/goodsList");         
        }
      });
    },
    //上传图片
    success(response, file, fileList) {
      var count = 1;
      let path = response.file[0].path.substr(6);
      if (count == 1) {
        this.ruleForm.listImages = path;
      }
      this.ruleForm.detailImages.push(path);
      count++;
    }
  }
};
</script>

<style>
.demo-ruleForm {
  width: 50%;
}
.el-upload__tip{
  margin-bottom: 10px;
}
</style>